<template>
  <font-request :provider="queryMenus">
    <template #default="{response, reload, loading}">
      <el-row>
        <el-col>
          <a @click="reload" class="pull-right" title="刷新菜单列表">
            <i class="fa fa-refresh"></i> 刷新
          </a>
        </el-col>
        <el-col>
          <el-skeleton :data="response" :loading="loading">
            <el-tree ref="treeRef" node-key="id" default-expand-all
                     :data="response" :show-checkbox="true" :expand-on-click-node="false"></el-tree>
          </el-skeleton>

          <el-button type="primary"  title="保存菜单栏权限配置" class="pull-right">保存</el-button>
        </el-col>
      </el-row>
    </template>
  </font-request>
</template>

<script setup lang="ts">
import Bamboo from "@/lang/bamboo";
import menu from "@/view/core/init/menu/menu.js";
import {onMounted, ref, watch} from "vue";
import Layers from "@/lang/layers";

// Reference
const treeRef = ref();

const props = defineProps({
    // 成功回调，通常是刷新数据表格
    object: {type: Object, default: undefined}
})



// 查询机构列表
const queryMenus = () => menu.list({}).then(list => Bamboo.toTree(list, menu.mapper_menus))

/**
 * 查询结果转换为树形结构
 */
const resultParser = (list) => {
    return Bamboo.toTree(list, Bamboo.menuMapper);
}

const handleMenuChange = (val) => {
    if (val !== undefined) {
        Layers.ajax({
            url: '/authority/menu/list',
            method: 'GET',
            params: {roleId: val.id}
        }).then((result) => {
            if (result.code === 0) {
                let list = result.data;
                let checked = Bamboo.getIds(list);
                treeRef.value.setCheckedKeys(checked);
            }
        });
    }
}

watch(() => props.object, handleMenuChange);

onMounted(()=>{
    if (props.object) {
        handleMenuChange(props.object);
    }
})
</script>

<style scoped>
</style>